<template>
    <div class="container">

        <div class="left">
            <div class="title">
                <h1>光谷智慧交通</h1>
            </div>
            <el-menu ellipsis class="el-menu-popper-demo" mode="horizontal" :popper-offset="16"
                style="max-width: 600px">
                <template v-for="(item, index) in menuItems" :key="index">
                    <!-- 渲染主菜单项 -->
                    <el-menu-item v-if="item.type === 'main'" @click="handleClick(item.path)">
                        {{ item.text }}
                    </el-menu-item>
                    <!-- 渲染子菜单 -->
                    <el-sub-menu v-else-if="item.type === 'sub'">
                        <template #title>
                            {{ item.text }}
                        </template>
                        <template v-for="(subItem, subIndex) in item.children" :key="subIndex">
                            <el-menu-item @click="handleClick(subItem.path)">
                                {{ subItem.text }}
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                </template>
            </el-menu>
        </div>

        <div class="right">
            <el-input v-model="input" style="width: 240px" placeholder="请输入交通事故查询信息" />

            <el-button type="primary">查询</el-button>

            <el-dropdown>
                <span class="el-dropdown-link">
                    用户管理
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>退出登入</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

    </div>
</template>


<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const handleClick = ((path) => {
    router.push(path)
})
const menuItems = [
    {
        text: '实时路况',
        path: '/roadtime',
        type: 'main'
    },
    {
        text: '查看公告',
        path: '/notice',
        type: 'main'
    },
    {
        text: '反馈路况',
        path: '/roadreport',
        type: 'main'
    },
    {
        text: '工具箱',
        path: '/toos',
        type: 'sub',
        parentIndex: 4, // 假设索引为4作为父菜单（这里可以根据实际调整索引对应关系）
        children: [
            {
                text: '测量距离',
                path: '/distance',
                type: 'sub-item'
            },
            {
                text: '测量面积',
                path: '/area',
                type: 'sub-item'
            },
            {
                text: '关闭测量',
                path: '/close',
                type: 'sub-item'
            },
            {
                text: '导出图片',
                path: '/picture',
                type: 'sub-item'
            }
        ]
    }
];

</script>
<style scoped lang="scss">
.container {
    display: flex;
    height: 70px;
    width: 100vw;
    border-bottom: 0.05px solid #dfdfdf;

    .left {
        display: flex;
        position: absolute;
        left: 10px;
        padding: 10px 10px;

        .title {
            line-height: 55px;
            padding: 0px 20px;
        }
    }

    .right {
        display: flex;
        position: absolute;
        right: 10px;
        margin-top: 30px;
        gap: 10px;

        .el-dropdown-link {
            line-height: 30px;

            .el-dropdown-link {
                text-align: center;
            }
        }
    }


}
</style>